<template>
	<div class="home">
		<router-view></router-view>
		<van-tabbar
			v-if="
				route.meta.activeTab &&
				!route.path.split('/').includes('app_search') &&
				!store.state.issx
			"
			route
		>
			<van-tabbar-item
				v-for="item in list"
				:key="item.id"
				replace
				:to="item.to"
			>
				<span>{{ item.text }}</span>
				<template #icon>
					<i class="low-code tab-icon" :class="item.tabIcon"></i>
				</template>
			</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script lang="ts">
export default {
	name: 'HomeIndex',
}
</script>
<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
// import { t } from '@/entry_mobile/locales/index'
import { i18n } from '@/locales'
const { $t } = i18n
import { useStore } from 'vuex'
const route = useRoute()
const router = useRouter()
const store = useStore()
const originalHeight = ref(0)
const tabs = computed(() => store.state.tenant.mobile_tab_list)
let list: any = ref([])

const tabDetail = [
	{
		name: 'launchApplication',
		text: $t('menu.applicationCenter', '应用中心'),
		to: '/application_center',
		tabIcon: 'iconyidongduan-yingyongzhongxin',
	},
	{
		name: 'myTask',
		text: $t('menu.myMission', '我的任务'),
		to: '/my_task',
		tabIcon: 'iconyidongduan-woderenwu',
	},
	{
		name: 'myApplications',
		text: $t('menu.myApplication', '我的申请'),
		to: '/my_approval',
		tabIcon: 'iconyidongduan-wodeshenqing',
	},
	{
		name: 'personalCenter',
		text: $t('menu.personalCenter', '个人中心'),
		to: '/personal_center',
		tabIcon: 'iconyidongduan-gerenzhongxin',
	},
]
onMounted(() => {
	init()
})
watch(
	() => route.path,
	() => {
		if (route.path !== '/changeOrg') {
			sessionStorage.setItem('returnPathName', route.path)
		}
	}
)
const tabList = () => {
	tabs.value.map((tab: any) => {
		for (let i = 0; i < tabDetail?.length; i++) {
			if (tab === tabDetail[i].name) {
				list.value.push(tabDetail[i])
			}
		}
	})
}
const init = () => {
	tabList()
	let pushPath: any = sessionStorage.getItem('returnPathName')
	router.replace(pushPath ? pushPath : list.value[0].to)
}

// window.addEventListener('visibilitychange', function () {
// 	if(!document.hidden){
// 		// router.replace(pushPath)
// 		alert(1111)
// 		window.location.reload()
// 	}
// })
</script>

<style lang="less">
.home {
	background: @rok-mobile-bg-default-color;
	min-height: 100vh;
	height: 100%;
	.van-tabbar-item {
		width: 25%;
		.van-tabbar-item__icon {
			color: #bbbfc4;
		}
		.van-tabbar-item__text {
			width: 80%;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			text-align: center;
			span {
				width: 100%;
			}
		}
	}
	.van-tabbar-item--active {
		.van-tabbar-item__text {
			span {
				color: @rok-mobile-primary-color;
				font-weight: 600;
			}
		}
		.van-tabbar-item__icon {
			color: @rok-mobile-primary-color;
		}
	}
	.tab-icon {
		font-size: 25px;
	}
}
</style>
